<script setup>
import { ref } from 'vue'
import { evaluate } from 'mathjs'
import {useStudyRoomStore} from "@/stores/index.js";
const store = useStudyRoomStore();
const closeWidget = () => {
  store.widgetSwitch.calculator = false;
};

// 输入框的值
const inputValue = ref('')
// 计算时输入到eva中的值
const calculateValue = ref('')
// 结果值
const resultValue = ref('')

/**
 * 将指定的字符串追加到 inputValue 的当前值中。
 *
 * @param {string} item - 需要追加的字符串。
 * @returns {void} 该函数没有返回值。
 */
function append(item) {
  inputValue.value += item
}

/**
 * 计算函数，用于处理用户输入的数学表达式并输出计算结果
 * 该函数首先会检查输入值是否为空或者包含无效的'undefined'字符串
 * 然后，它将替换输入中的除号和乘号为mathjs库可以识别的格式
 * 最后，使用mathjs库计算表达式的结果，并根据结果的类型进行格式化。
 *
 * @returns {void} 该函数没有返回值。
 */
function calculate() {
  // 判空
  if (!inputValue.value) {
    ElMessage({
      message: '输入框不能为空',
      type: 'error',
      duration: 2000,
    })
    inputValue.value = ''
    resultValue.value = ''
    return
  }

  // 判断是否包含undefined
  if (inputValue.value.includes('undefined')) {
    ElMessage({
      message: '输入框错误，请清空重新输入',
      type: 'error',
      duration: 2000,
    })
    inputValue.value = ''
    resultValue.value = ''
    return
  }

  // 将除号和乘号替换为mathjs的可识别的除号和乘号
  calculateValue.value = inputValue.value.replace(/÷/g, '/').replace(/×/g, '*')

  try {
    // 计算，这里使用了mathjs的evaluate方法
    const rawResult = evaluate(calculateValue.value)
    // 检查是否为浮点数且小数位数超过两位
    const resultStr = String(rawResult)
    if (resultStr.includes('.') && resultStr.split('.')[1].length > 2) {
      resultValue.value = parseFloat(rawResult.toFixed(2)).toString()
    } else {
      resultValue.value = resultStr
    }
  } catch (error) {
    // 如果计算出错，则显示错误信息
    inputValue.value = 'Error'
    calculateValue.value = ''
    resultValue.value = ''
    ElMessage({
      message: '错误，请清空重新输入',
      type: 'error',
      duration: 2000,
    })
  }
}

/**
 * 清除所有输入和结果值
 *
 * 该函数将重置所有相关变量，以清除用户输入和计算结果
 * 主要用于用户开始新的输入或计算前，确保没有之前的残留信息
 *
 * @returns {void} 该函数没有返回值。
 */
function clear() {
  inputValue.value = ''
  calculateValue.value = ''
  resultValue.value = ''
}

/**
 * 取消上一次的输入
 *
 * 当inputValue存在且为字符串时，移除其最后一个字符
 * 同时，也将calculateValue的最后一个字符移除
 * 这是为了保持两者同步，且允许用户撤销输入
 *
 * @returns {void} 该函数没有返回值。
 */
function cancel() {
  if (inputValue.value && typeof inputValue.value === 'string') {
    inputValue.value = inputValue.value.slice(0, -1)
    calculateValue.value = calculateValue.value.slice(0, -1)
  }
}
</script>
<template>
  <div class="calculator">

    <div class="two-icon">
      <img src="../../assets/icon/StudyRoom/smile.png" alt="" class="icon1">
      <img src="../../assets/icon/StudyRoom/exit.png" alt="" class="icon2" @click="closeWidget()">
    </div>

    <div class="input-box">
      <input type="text" disabled v-model="inputValue" />
      <span class="">=</span>
      <div class="calculate-value">{{ resultValue }}</div>
    </div>

    <div class="buttons-box">
      <button class="b-b" @click="clear()">AC</button>
      <button class="b-b" @click="cancel()">←</button>
      <button class="b-b" @click="append('%')">%</button>
      <button class="b-b" @click="append('÷')">÷</button>
      <button class="b-w" @click="append('7')">7</button>
      <button class="b-w" @click="append('8')">8</button>
      <button class="b-w" @click="append('9')">9</button>
      <button class="b-b" @click="append('×')">×</button>

      <button class="b-w" @click="append('4')">4</button>
      <button class="b-w" @click="append('5')">5</button>
      <button class="b-w" @click="append('6')">6</button>
      <button class="b-b" @click="append('-')">-</button>

      <button class="b-w" @click="append('1')">1</button>
      <button class="b-w" @click="append('2')">2</button>
      <button class="b-w" @click="append('3')">3</button>
      <button class="b-b" @click="append('+')">+</button>

      <button class="b-w b-0" @click="append('0')">0</button>
      <button class="b-w" @click="append('.')">.</button>
      <button class="b-b" @click="calculate()">=</button>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.calculator {
  position: relative;
  float: right;
  right: 20px;
  top: 50px;
  width: 300px;
  height: 500px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.4);
  .two-icon{
    width: 100%;
    height: 20px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 15px;
    padding-top: 20px;
    padding-right: 25px;
    .icon1, .icon2{
      width: 20px;
      height: 20px;
    }
  }
  .input-box {
    width: 250px;
    height: 64px;
    margin-top: 19px;
    margin-bottom: 30px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 1);
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;

    input {
      width: 140px;
      height: 20px;
      font-size: 18px;
      border: none;
      text-align: left;
      border-radius: 10px;
      background: rgba(255, 255, 255, 1);
    }
  }
  .buttons-box {
    width: 245px;
    height: 340px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    button {
      width: 50px;
      height: 50px;
      border: none;
      border-radius: 50%;
      font-size: 18px;
    }

    .b-w {
      background-color: #ffffff;
      color: #7d7d7d;
      &:hover {
        background-color: #f0f0f0;
        color: #555555;
        cursor: pointer;
      }
    }

    .b-b {
      background-color: #7d7d7d;
      color: #eeeeee;
      &:hover {
        background-color: #666666;
        color: #ffffff;
        cursor: pointer;
      }
    }

    .b-0 {
      border-radius: 25px;
      grid-column: span 2;
      width: calc(2 * 50px + 5px); /* 调整宽度以适应两列 */
    }
  }
}
</style>
